<template>
  <div>
     <MyHeader
     title="tabbar案例"
     :background="'blue'"
     >
     </MyHeader>
     <div class="main">
      <!-- 使用动态组件方法,切换页面 -->
      <component :is="comName"></component>
     </div>
     <MyTabBar :list="tabList" @tab="tabFn"></MyTabBar>
  </div>
</template>

<script>
import MyGoodsList from './第六天作业/MyGoodsList.vue'
import MyGoodsSearch from './第六天作业/MyGoodsSearch.vue'
import MyUserInfo from './第六天作业/MyUserInfo.vue'
import MyTabBar from './第六天作业/MyTabBar.vue'
import MyTable from './第六天作业/MyTable.vue'
import MyHeader from './第六天作业/MyHeader.vue'

export default {
  components:{
     MyGoodsList,
     MyGoodsSearch,
     MyUserInfo,
     MyTabBar,
     MyTable,
     MyHeader,
  },
  data(){
    return {
      comName: 'MyGoodsList',  //定义默认显示的页面
      tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
    }
  },
  // 点击切换页面
  methods:{
    tabFn(comName){
      this.comName = comName
    }
  },
}
</script>

<style scoped>
  .main {
    margin-top:45px;
    margin-bottom:50px;
  }
</style>